<template>
    <div class="text_contaner">
        <span class="board_text_item"
            :class="isAnimation ? 'board_animation' :''"
            v-for="(item,index) in texts"
            :key="index"
            :style="{
                animationDelay: `${Math.random() * 0.5}s`,
                animationPlayState:animationState,
                animationDuration: `${duration}s`,
                '--textColor':textColor
            }"
            @webkitAnimationStart="animationStart"
            @animationstart="animationStart"
            @webkitAnimationEnd="animationEnd"
            @animationEnd="animationEnd"
            >{{ item }}</span>

        <div class="board_text_item"
            :class="isAnimation ? 'board_animation' :''"
            :style="{
                animationDelay: `${Math.random() * 0.5}s`,
                animationPlayState: animationState,
                animationDuration:`${duration}s`
            }"
            >
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { debounce } from '../Autils/index';
import { CommonFn, getTextArr } from '../Ahooks/index'

defineOptions({
    name:'Board'
})

const props = defineProps({
    text: {
        type: String,
        default:''
    },
    immediately: {
        type: Boolean,
        default:true
    },
    duration: {
        type: [String, Number],
        default:0.5
    },
    textColor: {
        type: [String],
        default: '#000'
    }
})

const { isAnimation,
        animationState,
        start,
        paused,
        rest
        } = CommonFn()

const {texts} = getTextArr(props)    

const emits = defineEmits(["onStart",'onEnd'])

const animationStart = debounce(() => {
            emits('onStart')
        })


const animationEnd = debounce(() => {
            emits('onEnd')
        })

if (props.immediately) {
    start()
} else {
    paused()
}
defineExpose({start,paused,rest})

</script>

<style lang="less" scoped>
@import url("~/ACommonLess/index.less");

.board_text_item{
    display: inline-block;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    background-clip: text;
    color:transparent;
}

.board_animation{
    animation-name: righttop_leftbottom;
}

@keyframes righttop_leftbottom {
    0%{
    background: no-repeat linear-gradient(var(--textColor),var(--textColor)) text left top/50% 50%,
                no-repeat linear-gradient(var(--textColor),var(--textColor)) text right bottom/50% 50%;
                opacity: 0;
    }

    99%{
    background: no-repeat linear-gradient(var(--textColor),var(--textColor)) text left top/100% 50%,
                no-repeat linear-gradient(var(--textColor),var(--textColor)) text right bottom/100% 50%;
    }

    100%{
        background:no-repeat linear-gradient(var(--textColor),var(--textColor)) text;
        opacity: 1;
    }
    
}
</style>